<template>
    <section class="page-wrap">
        <div class="page-header">
            <div class="page-title">镜像管理
                <QuestionCircleOutlined class="ml-8" @click="docVisible = true" />
            </div>

            <div class="fz-12 col-8A93A7 mr-32">当前镜像存储费用: <span class="col-money">{{
                formatImageStorageFee()
            }}</span>/小时=存储单价：<span class="col-money">{{ image_storage_price }}</span>/小时*GB*已使用 <span
                    class="col-money">{{ printSize(totalSize) }}</span></div>
        </div>
        <div class="page-content">
            <a-table :dataSource="tableList" :pagination="false">
                <a-table-column key="imageName" title="镜像名称" data-index="imageName">
                    <template #default="{ record }">
                        <span>{{ record.UserImage.customName }}
                            <edit-outlined @click="editName(record.UserImage.customName, record.UserImage.id)"
                                style="margin-left: 32px;color: #07f;" />
                        </span>
                    </template>
                </a-table-column>
                <a-table-column key="imageSize" title="镜像大小" data-index="imageSize">
                    <template #default="{ record }">
                        {{ printSize(record?.Image?.imageSize) }}
                    </template>
                </a-table-column>
                <a-table-column key="createdAt" title="创建时间" data-index="createdAt">
                    <template #default="{ record }">
                        {{ record?.UserImage?.createdAt }}
                    </template>
                </a-table-column>
                <a-table-column key="status" title="状态" data-index="status">
                    <template #default="{ record }">
                        <span
                            :class="{ 'success-tag': record?.UserImage?.status == 1 || record?.UserImage?.status == 2, 'warning-tag': record?.UserImage?.status == 3 }">{{
                                selectDictLabel(statusEnum, record?.UserImage?.status) }}</span>
                    </template>
                </a-table-column>
                <a-table-column key="action" title="操作">
                    <template #default="{ record }">
                        <a-dropdown :disabled="record?.UserImage?.status != 2">
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item key="communityCloud">
                                        <a-button type="link"
                                            @click="router.push({ path: '/communityCloud', query: { imageId: record?.Image?.imageId } })">社区云</a-button>
                                    </a-menu-item>
                                    <a-menu-item key="highlyAvailableCloud">
                                        <a-button type="link"
                                            @click="router.push({ path: '/highlyAvailableCloud', query: { imageId: record?.Image?.imageId } })">高可用云</a-button>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <a-button type="link" style="padding-left:0;">
                                创建实例
                                <DownOutlined />
                            </a-button>
                        </a-dropdown>

                        <a-dropdown v-if="userInfo?.userItem?.isEnterprise">
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item key="cache">
                                        <a-button type="link" @click="cacheImage(record.UserImage.id)">缓存镜像</a-button>
                                    </a-menu-item>
                                    <a-menu-item key="del">
                                        <a-popconfirm title="确定要删除镜像?" @confirm="delImage(record.UserImage.id)"
                                            @cancel="cancel">
                                            <a-button type="link">删除</a-button>
                                        </a-popconfirm>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <a-button type="link">
                                更多
                                <DownOutlined />
                            </a-button>
                        </a-dropdown>

                        <a-popconfirm v-if="!userInfo?.userItem?.isEnterprise" title="确定要删除镜像?"
                            @confirm="delImage(record.UserImage.id)">
                            <a-button type="link">删除</a-button>
                        </a-popconfirm>
                    </template>
                </a-table-column>
            </a-table>
        </div>

        <a-modal v-model:visible="modalVisible" title="修改镜像名称" @ok="handleOk">
            <a-form class="query-list-form" :model="form">
                <a-form-item label="实例名称" :rules="[{ required: true, message: '请输入实例名称' }]">
                    <a-input placeholder="请输入实例名称" :maxlength="20" v-model:value="form.name"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pn" v-model:limit="queryParams.ps"
            @pagination="getList" />

        <GpuDrawer v-model="docVisible" v-if="docVisible" :url="docurl"></GpuDrawer>
    </section>
</template>

<script setup name="GpuImage">
import { reactive, ref } from 'vue'
import {
    QuestionCircleOutlined,
    EditOutlined,
    DownOutlined
} from '@ant-design/icons-vue';
import { ZyNotification } from 'libs/util.toast'
import { getUserImageList, delUserimage, updateUserimage } from 'api/modules/api.image'
import { useRouter } from 'vue-router';
import { selectDictLabel, printSize } from '@/libs/util.common'
import { storeToRefs } from 'pinia'
import userInfoStore from '@/stores/userInfo.js'
import { getSetting } from 'api/modules/api.common'
const useUserInfoStore = userInfoStore()
const { userInfo } = storeToRefs(useUserInfoStore);

const router = useRouter()

const tableList = ref([]);
const total = ref(0)
const totalSize = ref(0)
const queryParams = ref({
    pn: 1,
    ps: 10
})

const docVisible = ref(false)
const docurl = window.location.origin + '/docs/help_document/manual/image/'

const statusEnum = [
    {
        label: '备份中',
        value: '1',
    },
    {
        label: '备份成功',
        value: '2',
    },
    {
        label: '备份失败',
        value: '3',
    }
]

const getList = () => {
    const params = {
        ...queryParams.value,
    }
    getUserImageList(params).then(res => {
        total.value = res.data.total || 0
        totalSize.value = res.data.totalSize
        tableList.value = res.data.list || []
    })
}

// 更改实例名称
const form = ref({})
const modalVisible = ref(false)
const editName = (name, id) => {
    form.value.id = id
    form.value.name = name
    modalVisible.value = true
}

const handleOk = () => {
    updateUserimage(form.value).then(res => {
        modalVisible.value = false
        getList()
    })
}

// 删除镜像
const delImage = (id) => {
    const params = {
        id
    }
    delUserimage(params).then(res => {
        if (res.code == 0) {
            ZyNotification.success('删除成功')
            getList()
        }
    }).catch(err => {
        ZyNotification.error('操作失败')
    })
}

getList()


// 获取后台配置数据
const image_storage_price = ref('')
const getSet = () => {
    const params = {
        key: ['image_storage_price']
    }
    getSetting(params).then(res => {
        if (res.code == 0) {
            res.data?.list?.forEach(item => {
                if (item.key == 'image_storage_price') {
                    image_storage_price.value = item.value
                }
            })
        }
    })
}

getSet()

//  GB内存计算
const printGBSize = val => {
    const GB = 1024 * 1024 * 1024
    if (!val) {
        return 0
    }

    return `${(val / GB).toFixed(2)}`
}

const formatImageStorageFee = () => {
    let fee = ''
    fee = (parseFloat(image_storage_price.value) * printGBSize(totalSize.value))
    if (parseFloat(fee) > 0 && parseFloat(fee) < 0.01) {
        fee = 0.01
    }

    return fee.toFixed(2)
}

</script>

<style scoped lang="less">
.page-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;

}

.page-header {
    display: flex;
    align-items: center;
    height: 64px;
    background: #ffffff;
    margin-bottom: 4px;
    padding: 0 24px;

    .page-title {
        color: #223354;
        font-family: PingFang SC;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding-right: 8px;
        margin-right: 8px;
    }

    .page-title::after {
        display: block;
        content: '';
        height: 5px;
        background: linear-gradient(90deg, #07F 5.32%, rgba(255, 255, 255, 0.00) 103.53%);
    }
}

.page-content {
    flex: 1;
    background: #ffffff;
    padding: 24px;
    overflow-y: scroll;
}

.page-footer {
    background: #fff;
}

::v-deep(.page-content .ant-table-thead>tr>th) {
    color: #8A93A7;
    font-size: 14px;
    background: #F3F5F7;
    border: none;

    &::before {
        display: none;
    }
}
</style>
